<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">

	<ui:composition template="/templates/masterLayout.xhtml">
		<ui:define name="content">
			<style>
.simple-panel {
	border: 0 !important;
}

.simple-panel .ui-panel-content {
	padding: 0 !important;
}
</style>

			<h:form id="sanPhamFilterId">
				<p:panel styleClass="simple-panel">
					<p:outputLabel for="nameFilterId" value="Tên: " style="font-weight:bold" />
					<p:inputText id="nameFilterId" value="#{sanPhamView.dataModel.nameFilter}" style="margin-right: 10px;" />

					<p:outputLabel for="loaiSpIdFilterId" value="Loại:" style="font-weight:bold" />
					<p:selectOneMenu id="loaiSpIdFilterId" value="#{sanPhamView.dataModel.loaiSpIdFilter}"
						style="vertical-align: middle; margin-right: 10px;">
						<f:selectItem itemLabel="" itemValue="" />
						<f:selectItems value="#{sanPhamView.loaiSPs}" var="loaiSP" itemLabel="#{loaiSP.name}" itemValue="#{loaiSP.id}" />
					</p:selectOneMenu>

					<p:commandButton id="searchBtnId" icon="ui-icon-search" process="@form"
						update=":sanPhamListFormId:sanPhamDataTableId" />
					<p:commandButton icon="ui-icon-cancel" action="#{sanPhamView.dataModel.clearFilters}"
						update="@form, :sanPhamListFormId:sanPhamDataTableId" />
					<p:defaultCommand target="searchBtnId" />
				</p:panel>
			</h:form>
			<h:form id="sanPhamListFormId">
				<p:dataTable id="sanPhamDataTableId" value="#{sanPhamView.dataModel}" resizableColumns="true"
					selection="#{sanPhamView.selectedEntities}" paginator="true" var="entity" rows="10"
					paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
					lazy="true" paginatorPosition="bottom">
					<p:ajax event="rowDblselect" listener="#{sanPhamView.editAction}" partialSubmit="true"
						oncomplete="sanPhamDialog.show()" update=":sanPhamDetailFormId:sanPhamPanelGridId" />
					<f:facet name="header">
						<p:commandButton icon="ui-icon-plus" value="Tạo mới" action="#{sanPhamView.newAction}"
							actionListener="#{sanPhamView.reset}" update=":sanPhamDetailFormId:sanPhamPanelGridId"
							oncomplete="sanPhamDialog.show()" style="float:left" />
						<p:commandButton icon="ui-icon-circle-check" value="Active" action="#{sanPhamView.activeAction(true)}"
							update=":sanPhamListFormId:sanPhamDataTableId" style="float:left" />
						<p:commandButton icon="ui-icon-circle-minus" value="Inactive" action="#{sanPhamView.activeAction(false)}"
							update=":sanPhamListFormId:sanPhamDataTableId" style="float:left" />

						<p:commandButton value="PDF" update=":reportDialogId" action="#{sanPhamView.printPdf()}"
							oncomplete="reportDialog.show()" style="float: left;" />
						<p:commandButton value="Excel" update=":reportDialogId" action="#{sanPhamView.printXls()}"
							oncomplete="reportDialog.show()" style="float: left;" />
						<div style="clear: both"></div>
					</f:facet>

					<p:column selectionMode="multiple" style="width:20px; text-align: center" />

					<p:column headerText="Mã số" sortBy="#{entity.code}">
						<h:outputText value="#{entity.code}" />
					</p:column>

					<p:column headerText="Tên" sortBy="#{entity.name}">
						<h:outputText value="#{entity.name}" />
					</p:column>

					<p:column headerText="Loại">
						<h:outputText value="#{entity.loaiSP.name}" />
					</p:column>
					<p:column headerText="Thông tin">
						<h:outputText value="#{entity.thongTin}" />
					</p:column>
					<p:column headerText="ĐVT">
						<h:outputText value="#{entity.donViTinh}" />
					</p:column>
					<p:column headerText="Đơn giá" sortBy="#{entity.donGia}">
						<h:outputText converter="VNDConverter" value="#{entity.donGia}" />
					</p:column>
					<p:column headerText="Active">
						<h:graphicImage library="icons" name="#{entity.active?'activeIcon16.png':'inactiveIcon16.png'}" />
					</p:column>
					<f:facet name="footer">
					</f:facet>
				</p:dataTable>

				<p:confirmDialog id="sanPhamDeleteConfirmDialogId" message="Bạn muốn xóa sản phẩm?" header="Xác nhận xóa sản phẩm"
					severity="alert" widgetVar="sanPhamDeleteConfirmDialog">

					<p:commandButton id="deleteYesId" value="Yes" update=":sanPhamListFormId:sanPhamDataTableId"
						oncomplete="sanPhamDeleteConfirmDialog.hide()" action="#{sanPhamView.deleteAction}" />
					<p:commandButton id="deleteNoId" value="No" onclick="sanPhamDeleteConfirmDialog.hide()" type="button" />
				</p:confirmDialog>

			</h:form>

			<ui:include src="sanPhamDetails.xhtml" />

			<p:dialog id="reportDialogId" header="#{text['title.reportDialog']}" widgetVar="reportDialog" appendToBody="true"
				modal="true" height="100">
				<p>
					#{text['message.report']} <a href="#{sanPhamView.reportUrl}">#{text['label.download']}</a>
				</p>
			</p:dialog>

		</ui:define>
	</ui:composition>

</ui:composition>